<template>
	<view class="production">
		<view class="left">
			<view class="leftContent" v-for="(item,index) in productionList" v-if="index%2==0" @click="toDetail(item)">
				<image :src="item.coverImg" mode="aspectFill" class="productionImage"></image>
				<text class="productionName">{{item.productionName}}</text>
				<p class="price">￥{{item.price}}</p>
			</view>
		</view>
		<view class="right">
			<view class="rightContent" v-for="(item,index) in productionList" v-if="index%2!=0" @click="toDetail(item)">
				<image :src="item.coverImg" mode="aspectFill" class="productionImage"></image>
				<text class="productionName">{{item.productionName}}</text>
				<p class="price">￥{{item.price}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageSize: 10,
				pageIndex:1,
				productionList:[],
				openId:null,
			}
		},
		mounted(){
			this.getList();
		},
		onReachBottom(){
			this.pageIndex++;
			console.log('下拉刷新',this.pageIndex);
			this.getList();
		},
		methods:{
			toDetail(item){
				console.log("hh");
				if(this.openId==item.openId){
					uni.navigateTo({
						url:'/pages/Me/personalcommodity?item='+encodeURIComponent(JSON.stringify(item)),
					})
				}
				else{
					uni.navigateTo({
						url:'../commodity/buycommodity?marketitem='+encodeURIComponent(JSON.stringify(item))
					})
				}
			},
			getList(){
				
				uni.getStorage({
					key:"user",
					success: (res) => {
						let _this=this;
						var openId = res.data.openId;
						_this.openId = openId;
						this.$axios({
							method:'POST',
							url:`/production/getProductionList/${_this.pageIndex}`,
							params:{
								//openId:openId,
								pageSize:_this.pageSize,
							}
						}).then(
							res =>{
								console.log(res.data);
								for(var i=0;i<res.data.length;i++){
									// console.log(res.data[i].productionName);
									var tmp={}
									tmp["openId"]=res.data[i].openId;
									tmp["coverImg"]=res.data[i].coverImg;
									tmp["price"]=res.data[i].price;
									tmp["productionName"]=res.data[i].productionName;
									this.productionList.push(tmp);
								}
							}
						).catch(
							err =>{
								console.log(err);
							}
						)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// button{
	// 	position: fixed;
	// 	bottom:0;
	// 	width: 300rpx;
	// 	height: 100rpx;
	// 	background-color: skyblue !important;
	// 	color: white;
	// }
	
	.production{
		width:100%;
		height:100%;
		display:flex;
		flex-direction: row;
		background-color: #eeeeef;
		// .underPageBnt{
		// 	position: fixed;
		// 	bottom:0;
		// 	display:flex;
		// 	flex-direction:row;
		// 	.prebnt{
		// 		float:left;
		// 		margin-right:350upx;
		// 		width: 200rpx;
		// 		height: 100rpx;
		// 	}
		// 	.nxtbnt{
		// 		float:right;
		// 		width: 200rpx;
		// 		height: 100rpx;
		// 	}
		// }
		.left{
			width:50%;
			//background-color: red;
			// height:1024upx;
			.leftContent{
				width:350upx;
				height:480upx;
				background-color: white;
				margin-left:15upx;
				margin-right:10upx;
				margin-top:30upx;
				margin-bottom:30upx;
				align-items: center;
				border-radius: 20upx;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			}
		}
		.productionImage{
			width:310upx;
			height:310upx;
			border-radius: 10%;
			margin-left: 20upx;
			margin-top: 20upx;
			
			border:1upx solid lightgray;
		}
		.productionName{
			margin-top:10upx;
			font-size:40upx;
			width:350upx;
			white-space: pre-wrap;
			word-wrap: break-word;
			margin-left: 30upx;
		}
		.price{
			margin-top:10upx;
			font-size:46upx;
			color:red;
			text-align: center;
		}
		.right{
			width:50%;
			// height:1024upx;
			//background-color: green;
			.rightContent{
				width:350upx;
				height:480upx;
				background-color: white;
				margin-left:10upx;
				margin-right:15upx;
				margin-top:30upx;
				margin-bottom:30upx;
				align-items: center;
				border-radius: 20upx;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			}
		}
	}
</style>